<template>
  <div class="screen" :style="{ background: store.state.bgClock }">
    <div class="head">
      <p class="title">
        <span :style="{ color: store.state.title }"
          >农业数据实时监视系统</span
        >
      </p>
      <div class="resize">
        <p class="iconfont icon-pifuzhuti-xianxing" @click="changeName"></p>
      </div>
      <img src="../assets/img/top02.png" alt="" />
    </div>
    <div class="container">
      <div class="left">
        <div :class="screenStatus.chart ? 'fullscreen' : 'chartComp'">
          <chartComp ref="chart"></chartComp>
          <div class="resize" @click="changeScreen('chart')">
            <span
              :class="[
                'iconfont',
                screenStatus.chart ? 'icon-suoxiao' : 'icon-fangda',
              ]"
            ></span>
          </div>
        </div>
        <div :class="screenStatus.dend ? 'fullscreen' : 'dendComp'">
          <dendComp ref="dend"></dendComp>
          <div class="resize" @click="changeScreen('dend')">
            <span
              :class="[
                'iconfont',
                screenStatus.dend ? 'icon-suoxiao' : 'icon-fangda',
              ]"
            ></span>
          </div>
        </div>
      </div>
      <div class="cheter">
        <div :class="screenStatus.ring ? 'fullscreen' : 'ringComp'">
          <ringComp ref="ring"></ringComp>
          <div class="resize" @click="changeScreen('ring')">
            <span
              :class="[
                'iconfont',
                screenStatus.ring ? 'icon-suoxiao' : 'icon-fangda',
              ]"
            ></span>
          </div>
        </div>

        <div :class="screenStatus.map ? 'fullscreen' : 'mapComp'">
          <mapComp ref="map"></mapComp>
          <div class="resize" @click="changeScreen('map')">
            <span
              :class="[
                'iconfont',
                screenStatus.map ? 'icon-suoxiao' : 'icon-fangda',
              ]"
            ></span>
          </div>
        </div>
      </div>
      <div class="right">
        <div :class="screenStatus.line ? 'fullscreen' : 'lineComp'">
          <lineComp ref="line"></lineComp>
          <div class="resize" @click="changeScreen('line')">
            <span
              :class="[
                'iconfont',
                screenStatus.line ? 'icon-suoxiao' : 'icon-fangda',
              ]"
            ></span>
          </div>
        </div>
        <div :class="screenStatus.pie ? 'fullscreen' : 'percentComp'">
          <percentComp ref="pie"></percentComp>
          <div class="resize" @click="changeScreen('pie')">
            <span
              :class="[
                'iconfont',
                screenStatus.pie ? 'icon-suoxiao' : 'icon-fangda',
              ]"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import chartComp from "../components/chart";
import dendComp from "../components/dendrogram";
import percentComp from "../components/percentage";
import ringComp from "../components/ring";
import lineComp from "../components/line";
import mapComp from "../components/map";
import { ref, reactive, toRefs, nextTick } from "vue";
import { useStore } from "vuex";
let store = useStore();
let chart = ref(null);
let dend = ref(null);
let ring = ref(null);
let map = ref(null);
let line = ref(null);
let pie = ref(null);

let screenStatus = reactive({
  chartComp: false,
  dendComp: false,
  percentComp: false,
  ringComp: false,
  lineComp: false,
  mapComp: false,
});

function changeScreen(type) {
  console.log(type);
  screenStatus[type] = !screenStatus[type];
  nextTick(() => {
    if (type == "chart") {
      chart.value.asisEcharts();
    } else if (type == "dend") {
      dend.value.asisEcharts();
    } else if (type == "ring") {
      ring.value.asisEcharts();
    } else if (type == "map") {
      map.value.asisEcharts();
    } else if (type == "line") {
      line.value.asisEcharts();
    } else {
      pie.value.asisEcharts();
    }
  });
}

function changeName() {
  store.commit("changeName");
}
</script>

<style scoped>
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
  /* background: red; */
}
.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* background-image: url("../assets/img/bgc01.png"); */
}
.head {
  flex: 1;
  /* border: 2px solid blue; */
  margin-bottom: 0.1%;
  position: relative;
  text-align: center;
}
.head img {
  width: 100%;
}
.head .title {
  color: #dbbc15;
  font-size: 20px;
  /* margin-top: 90px; */
  font-weight: bold;
  margin: 10px;
}
/* .head .p {
  display: flex;
}
.head .iconfont {
  display: flex;
  margin-left: 98%;
} */
.container {
  flex: 8;
  display: flex;
  justify-content: space-around;
}
.container .left {
  /* flex: 3; */
  /* border: 1px solid red; */
  width: 30%;
  height: 100%;
  margin-left: 0.5%;
  display: flex;
  flex-direction: column;
 
}
.left .chartComp {
  flex: 3;
  /* border: 1px solid purple; */
  margin-bottom: 8%;
  /* height: 45%; */
}
.left .dendComp {
  flex: 2.5;
  /* border: 1px solid brown; */
}
.container .cheter {
  /* border: 1px solid green; */
  width: 40%;
  height: 100%;
  margin: 0 2%;
  display: flex;
  flex-direction: column;
}

.cheter .ringComp {
  flex: 1;
  /* border: 1px solid purple; */
  margin-bottom: 8%;
  /* height: 45%; */
}
.cheter .mapComp {
  flex: 4;
  width: 100%;
  /* border: 1px solid brown; */
}
.container .right {
  /* border: 1px solid green; */
  width: 30%;
  height: 100%;
  margin: 0 2%;
  display: flex;
  flex-direction: column;
}
.right .lineComp {
  flex: 1;
  width: 100%;
  margin-bottom: 6%;
  /* border: 1px solid brown; */
}
.right .percentComp {
  flex: 1;
  /* border: 1px solid purple; */

  /* height: 45%; */
}
.dendComp,
.chartComp,
.ringComp,
.mapComp,
.lineComp,
.percentComp {
  position: relative;
}
.resize {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  color: white;
}
</style>
